<template>
  <view class="templateItem-com" :class="className">
    <view class="goods-item" @click="setTemplate">
      <view class="goods-item__top">
        <view class="goods-item__top-goods-info">
          <image :src="dataValue.mainPicUrl" class="goods-images" />
          <view class="goods-info">
            <view class="goods-info__name">
              <view class="neme u-line-1">{{ dataValue.goodsName }}</view>
            </view>

            <view class="goods-info__parameter"
              >{{$t('locales.brandSimple')}}:{{ dataValue.brandName }}</view
            >
            <view class="goods-info__parameter"
              >{{$t('locales.skuFormat')}}:{{ dataValue.specificationsName }}</view
            >

            <view class="goods-info__label" v-if="dataValue.labelList">
              <view
                class="goods-info__label-item"
                v-for="item in 3"
                :key="item"
                v-show="dataValue.labelList[item - 1]"
                >{{ dataValue.labelList[item - 1] }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    dataValue: {
      type: Object,
      default: () => {}
    },

    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },

  computed: {
    goodsInfo() {
      const value = this.dataValue
      // 使用模板商品去要去掉id字段
      delete value.id
      return value
    }
  },

  methods: {
    setTemplate() {
      uni.$emit('onSetTemplate', { ...this.goodsInfo })
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss">
.templateItem-com {
  .goods-item {
    margin: 16rpx 24rpx 0 24rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .goods-item__top {
      padding: 24rpx;

      .goods-item__top-goods-info {
        display: flex;

        .goods-images {
          width: 164rpx;
          height: 164rpx;
          margin-right: 25rpx;
          background-color: #f1f1f1;
          border-radius: 8rpx;
        }

        .goods-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .goods-info__name {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .neme {
              width: 360rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            .state {
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ff0f10;
            }
          }

          .goods-info__parameter {
            line-height: 36rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 24rpx;
          }

          .goods-info__label {
            display: flex;
            flex-wrap: wrap;
            .goods-info__label-item {
              line-height: 36rpx;
              background: #f2f4f7;
              border-radius: 4rpx;
              padding: 0 10rpx;
              text-align: center;
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              margin-right: 10rpx;
            }
          }
        }
      }

    }
  }
}
</style>
